<!-- 逆变器综合信息 -->
<template>
	<div class="dashboard-container">
		<page-header :headerTitle="$t('message.inverterNews.pageTitle')" :showWeather="false" />

		<div class="metrics-panel">
			<div class="station-count-panel">
				<div class="panel-section">
					<div class="metric-row">
						<span>{{ $t('message.inverterNews.pageInverterTotal') }}</span>
						<span class="metric-value">13</span>
						<span class="metric-unit">{{ $t('message.inverterNews.pageUnit') }}</span>
						<span class="filter-label">{{ $t('message.inverterNews.pagePower') }}</span>
						<span class="metric-number">11</span>
						<span class="metric-unit">{{ $t('message.inverterNews.pageUnit') }}</span>
					</div>
					<div class="metric-row">
						<span>{{ $t('message.inverterNews.pageStop') }}</span>
						<span class="metric-value">13</span>
						<span class="metric-unit">{{ $t('message.inverterNews.pageUnit') }}</span>
						<span class="filter-label">{{ $t('message.inverterNews.pagePhone') }}</span>
						<span class="metric-number">11</span>
						<span class="metric-unit">{{ $t('message.inverterNews.pageUnit') }}</span>
					</div>
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="selection-panel">
				<div style="line-height: 2rem">
					<p class="select-title" style="text-indent: 0.3rem; font-weight: bold; font-size: 1rem; text-align: left">
						{{ $t('message.inverterNews.pageStation') }}
					</p>
					<el-select v-model="statusValue" placeholder="Select" size="small" class="custom-select">
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div></div>
				<div style="line-height: 2rem">
					<p style="text-indent: 0.3rem; font-weight: bold; font-size: 1rem; text-align: left">{{ $t('message.inverterNews.pageStatusClass') }}</p>
					<el-select v-model="statusValue" placeholder="Select" size="small" class="custom-select">
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="hours-panel">
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image5.png" class="metric-icon" alt="小时图标" />
					<span>{{ $t('message.inverterNews.pageDaySmall') }}</span>
					<span class="metric-value">4.00</span>
					<span class="metric-unit">h</span>
					<span class="filter-label">{{ $t('message.inverterNews.pageSmallSet') }}</span>
					<el-input size="small" v-model="minDailyHours" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image5.png" class="metric-icon" alt="小时图标" />
					<span>{{ $t('message.inverterNews.pageDayBig') }}</span>
					<span class="metric-value">4.45</span>
					<span class="metric-unit">h</span>
					<span class="filter-label">{{ $t('message.inverterNews.pageDaySet') }}</span>
					<el-input size="small" v-model="maxDailyHours" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
			</div>

			<div style="text-align: center">
				<img src="../../assets/image8.png" alt="分隔线" style="height: 6.5rem" />
			</div>

			<div class="watt-panel">
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image6.png" class="metric-icon" alt="功率图标" />
					<span>{{ $t('message.inverterNews.pageTileSmall') }}</span>
					<span class="metric-value">30</span>
					<span class="metric-unit">%</span>
					<span class="filter-label">{{ $t('message.inverterNews.pageSmallSet') }}</span>
					<el-input size="small" v-model="minWattOutput" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
				<div class="metric-item" style="display: grid; grid-template-columns: 1fr 5fr 1fr 1fr 5fr 8fr">
					<img src="../../assets/image6.png" class="metric-icon" alt="功率图标" />
					<span>{{ $t('message.inverterNews.pageTileBig') }}</span>
					<span class="metric-value">65</span>
					<span class="metric-unit">%</span>
					<span class="filter-label">{{ $t('message.inverterNews.pageDaySet') }}</span>
					<el-input size="small" v-model="maxWattOutput" :placeholder="$t('message.form.pageInputHolder')" class="custom-input" />
				</div>
			</div>
		</div>

		<div class="table-container">
			<TableCustom :indexIsShow="true" :total="total" :hasToolbar="false" :tableData="tableData" :tableOption="tableOption">
				<template #inverterName="{ scope }">
					<span class="table-link" @click="oneInverterClick(scope)">{{ scope.row.name }}</span>
				</template>
			</TableCustom>
		</div>
	</div>
</template>

<script lang="ts">
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import TableCustom from '../../components/table/index.vue';
import { onMounted, defineComponent, reactive, toRefs, computed } from 'vue';
import pageHeader from '../../components/pageHeader/index.vue';

export default defineComponent({
	name: 'inverterNews',

	components: { pageHeader, TableCustom },

	setup(props, { emit }) {
		const { t } = useI18n();
		const state = reactive({
			total: 0,
			pageSize: 10,
			pageNum: 1,
			options: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			statusValue: '1',
			statusOptions: [
				{ value: '1', label: '选项1' },
				{ value: '2', label: '选项2' },
				{ value: '3', label: '选项3' },
				{ value: '4', label: '选项4' },
			],
			minDailyHours: '',
			maxDailyHours: '',
			minWattOutput: '',
			maxWattOutput: '',
			tableData: [{ name: '逆变器1' }, { name: '逆变器2' }, { name: '逆变器3' }, { name: '逆变器4' }],
		});

		const router = useRouter();
		const oneInverterClick = (val: any) => {
			router.push({
				path: '/gatherControlManage/oneInverterNews',
				query: { name: val.name },
			});
		};

		// table表头tableOption国际化
		const tableOption = computed(() => [
			{ prop: 'name', label: t('message.inverterNews.pageSubstation') },
			{ prop: 'name', label: t('message.inverterNews.pageInverter'), slotName: 'inverterName' },
			{ prop: 'name', label: t('message.inverterNews.pageStatus') },
			{ prop: 'name', label: t('message.inverterNews.pagePowerTable') },
			{ prop: 'name', label: t('message.inverterNews.pageWatt') },
			{ prop: 'name', label: t('message.inverterNews.pageDailyGeneration') },
			{ prop: 'name', label: t('message.inverterNews.pageDayHour') },
			{ prop: 'name', label: t('message.inverterNews.pageTotalGeneration') },
		]);

		onMounted(() => {
			// 初始化数据
			state.total = state.tableData.length;
		});

		return {
			tableOption,
			oneInverterClick,
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss" scoped>
.table-container {
	width: 100%;
}

.metrics-panel {
	width: 100%;
	display: grid;
	height: 6.5rem;
	padding: 0.3rem;
	grid-gap: 0.3rem;
	line-height: 0.5rem;
	background-color: #0a1a32;
	margin-bottom: 0.5rem;
	grid-template-columns: 4fr 1fr 5fr 1fr 7fr 1fr 7fr;
}

.station-count-panel {
	font-size: 0.8rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.panel-section {
	line-height: 2rem;
	.metric-row {
		display: flex;
		flex-wrap: nowrap;
	}
	.metric-value {
		color: #5fcffa;
		margin: 0 0.3rem;
	}
	.metric-unit {
		margin: 0 0.3rem;
	}
	.metric-number {
		color: green;
		font-weight: bold;
		margin: 0 0.3rem;
	}
}

.selection-panel {
	display: grid;
	padding: 1rem 0;
	font-size: 1rem;
	text-align: center;
	grid-template-columns: 5fr 1fr 5fr;
}

.hours-panel,
.watt-panel {
	text-align: center;
	padding: 1rem 0;
	font-size: 0.8rem;

	.metric-item {
		gap: 0.2rem;
		display: flex;
		margin: 0.2rem 0;
		flex-wrap: nowrap;
		align-items: center;

		.metric-icon {
			width: 1rem;
			height: 1rem;
		}

		.metric-value {
			color: #5fcffa;
			font-weight: 500;
			margin: 0 0.3rem;
			font-size: 1rem;
		}

		.metric-unit {
			font-size: 1rem;
			margin-right: 0.3rem;
		}
	}
}
</style>
